<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#BgDiv {
				background-color: #e3e3e3;
				position: absolute;
				z-index: 99;
				left: 0;
				top: 0;
				display: none;
				width: 100%;
				height: 1000px;
				opacity: 0.7;
				filter: alpha(opacity=70);
				-moz-opacity: 0.7;
			}
			
			#showdiv {
				position: absolute;
				width: 480px;
				height: 440px;
				left: 50%;
				top: 50%;
				margin-left: -240px;
				margin-top: -220px;
				height: auto;
				z-index: 100;
				background-color: #fff;
				display: none;
			}
		</style>
	</head>

	<body>
		<div><a href="javascript:showDiv();">弹出层</a></div>

		<div id="BgDiv"></div>

		<div id="showdiv"></div>
	</body>

</html>
<script src="js/jquery-1.9.0.min.js" language="javascript"></script>

<script>
	function showDiv() {
		$("#BgDiv").css({
			display: "block",
			height: $(document).height()
		});
		$("#showdiv").html('<div><a href="javascript:hideDiv();">关闭</a></div>');
		$("#showdiv").css("display", "block");
	}

	function hideDiv() {
		$("#BgDiv").css("display", "none");
		$("#showdiv").html('');
		$("#showdiv").css("display", "none");
	}
</script>